<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <button @click="slotname = 'top'">修改 - {{slotname}}</button>
        <box>
            <template #[slotname]>
                <!-- 改变了插槽内容的DOM结构
强制Vue重新计算和渲染插槽内容
避免了Vue的优化机制忽略更新 -->
                <p style="color: red" :key="slotname">买贵包赔</p>
            </template>
        </box>
    </div>
</body>

<template id="box">
    <div>
        <img src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/268412/26/27409/152452/67c594b3F1db25933/e4024b1b3d853848.jpg!q70.dpg.webp"
            alt="">


        <!-- slot 的 name 属性就是用来定义插槽名称用的 -->
        <slot name="top"></slot>
        <h3>海飞丝 <slot name="a"></slot>
        </h3>
        <slot name="bottom"></slot>


        <!-- 默认插槽，没有设置名字的插槽 -->
        <!-- <slot></slot> -->

    </div>
</template>

<script>

    const box = {
        template: '#box'
    }

    const app = {
        data() {
            return {
                slotname: 'bottom'
            }
        },
        methods: {
            changeName() {
                // console.log(99999);
                this.slotname = 'top'

            }
        },
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>